<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul,li{list-style: none}
ul li{ 
width:300px; 
height:100px;
background:#F33;
margin-bottom: 30px;
filter:alpha(opacity:30);
opacity: 0.3;
}
/*#div1 span{ 
width:50px; 
height:50px; 
position:absolute;
left:300px; 
top:125px;  
background:#4f88c8;
text-align:center;
line-height:50px
}*/
</style>
<script>
	  window.onload=function()
			  {
					var li1=document.getElementById('li1');
					var li2=document.getElementById('li2');
					var li3=document.getElementById('li3');///获得元素
					/* for(var i=0;i<aLi.length;i++){
					aLi[i].timer=null;*/
					//宽度变化
					li1.onmouseover=function()//移入事件
					{
					startMove(this,'width',1200);
					}
					li1.onmouseout=function()//移出事件
					{
					startMove(this,'width',300);
					}
					//高度变化
					li2.onmouseover=function()//移入事件
					{
					startMove(this,'height',600);
					}
					li2.onmouseout=function()//移出事件
					{
					startMove(this,'height',100);
					}
					//透明度变化动画
					li3.onmouseover=function()//移入事件
					{
					startMove(this,'opacity',100);
					}
					li3.onmouseout=function()//移出事件
					{
					startMove(this,'opacity',30);
			  }

			function getStyle(obj,attr){//封装获取样式表
				if(obj.currentStyle)
				  {
					  return obj.currentStyle[attr];//IE的样式
				  }
				else
				  {
					  return getComputedStyle(obj,false)[attr];//火狐的样式
				  }
			}
			/*var timer=null;*/
			function startMove(obj,attr,iTarget){//定义函数
					clearInterval(obj.timer);   //清空事件以免重复触发
					/*var oDiv=document.getElementById('div1');*///函数内获取元素
					obj.timer=setInterval(function(){   //定义定时器
							var curt=0;
							if(attr=='opacity')
							{
								  curt=Math.round(parseFloat(getStyle(obj,attr))*100);
							}
							else
							{
								  curt=parseInt(getStyle(obj,attr));
							}
			
			
					var speed=(iTarget-curt)/8; 
					speed=speed>0?Math.ceil(speed):Math.floor(speed);                           //定义速度属性
					/*if(obj.offsetWidth>iTarget)           //判断当前的left值与目标值的关系
					{
					speed=-10;                         //大于目标值速度则是负值
					}
					else
					{
					speed=10;                          //否则速度则是正值
					}*/
					if(curt==iTarget)           //等于目标值则停止运动
					{
						clearInterval(obj.timer)               //清空定时器
					}
					else{
						  if(attr=='opacity')
						  {
						  obj.style.filter='alpha(opacity:'+(curt+speed)+')';
						  obj.style.opacity=(curt+speed)/100;
											}
					else
					{
					obj.style[attr]=curt+speed+"px";
					}
					
					
					//运动速度
					}
					
					},30)
					}
					}
</script>
</head>

<body>
<!-- <div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div> -->
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>

</ul>

</body>
</html>
